<div class="wrap wp42Aadmin">
  <div class="icon32" id="icon-edit-comments"><br/></div>
  <h2>
    <?php echo __( '42 Answers Google Maps', 'oscimp_trdom' ); ?>
    <a href="/wp-admin/admin.php?page=42A-gmaps-admin.php&addMap=new" class="button add-new-h2">Nieuwe map toevoegen</a>
  </h2>

<?php if (isset($_POST['addMap'])) { ?>
  <div class="updated fade" id="message" style="background-color: rgb(255, 251, 204);">
    <p>Nieuwe map is succesvol <strong>toegevoegd!</strong></p>
  </div>
<?php
  } if (isset($_POST['updateMap'])) {
?>
  <div class="updated fade" id="message" style="background-color: rgb(255, 251, 204);"><p>De aanpassingen aan de map zijn succesvol <strong>opgeslagen!</strong></p></div>
<?php
  } if (isset($_POST['deleteMap'])) {
?>
  <div class="updated fade" id="message" style="background-color: rgb(255, 251, 204);"><p>Geselecteerde maps uit de lijst zijn succesvol <strong>verwijderd!</strong></p></div>
<?php } ?>

<?php
  // Add a new map
  if (isset($_POST['addMap'])) {
//    echo "NEW ADDED!!";
    $query = sprintf("
      INSERT INTO wp_42aGmaps
      SET mapName = '%s', mapDesc = '%s', mapLat = '%s', mapLon = '%s', mapAddress = '%s', mapZip = '%s', mapCity = '%s', mapType = '%s', mapZoom = '%s', mapIconId = '%s', mapIconColor = '%s'",
      $_POST['mapName'], $_POST['mapDesc'], $_POST['mapLat'], $_POST['mapLon'], $_POST['mapAddress'], $_POST['mapZip'], $_POST['mapCity'], $_POST['mapType'], $_POST['mapZoom'], $_POST['mapIconId'], $_POST['mapIconColor']
    );
    $result = mysql_query($query);
  };


// Update a map
  if (isset($_POST['updateMap'])) {
    $mapId = $_POST['mapId'];
    $mapName = $_POST['mapName'];
    $mapDesc = $_POST['mapDesc'];
    $mapAddress = $_POST['mapAddress'];
    $mapZip = $_POST['mapZip'];
    $mapCity = $_POST['mapCity'];
    $mapLat = $_POST['mapLat'];
    $mapLon = $_POST['mapLon'];
    $mapZoom = $_POST['mapZoom'];
    $mapType = $_POST['mapType'];
    $mapIconId = $_POST['mapIconId'];
    $mapIconColor = $_POST['mapIconColor'];

    $query = "
      UPDATE wp_42aGmaps
      SET 
        mapName = '$mapName',
        mapDesc = '$mapDesc',
        mapAddress = '$mapAddress',
        mapZip = '$mapZip',
        mapCity = '$mapCity',
        mapLat = '$mapLat',
        mapLon = '$mapLon',
        mapZoom = '$mapZoom',
        mapType = '$mapType',
        mapIconId = '$mapIconId',
        mapIconColor = '$mapIconColor'
      WHERE mapId = '$mapId'";
    $result = mysql_query($query);
//    echo $query . "<br />";
  };


// Delete a map
  if (isset($_POST['deleteMap'])) {
    foreach($_POST as $id) {
      mysql_query("DELETE FROM wp_42aGmaps WHERE mapId='$id'");
    }
  };


// Get map data for edit
  if(isset($_GET["editMap"])){
    $query = sprintf("SELECT * FROM wp_42aGmaps WHERE mapID = " . $_GET["editMap"]);
    $results = mysql_query($query); 
    $count = mysql_num_rows($results);
    while ($row = mysql_fetch_array($results)) {
      $output = '';
      $mapId = $row['mapId'];
      $mapName = $row['mapName'];
      $mapDesc = $row['mapDesc'];
      $mapAddress = $row['mapAddress'];
      $mapZip = $row['mapZip'];
      $mapCity = $row['mapCity'];
      $mapLat = $row['mapLat'];
      $mapLon = $row['mapLon'];
      $mapZoom = $row['mapZoom'];
      $mapType = $row['mapType'];
      $mapIconId = $row['mapIconId'];
      $mapIconColor = $row['mapIconColor'];
    }
    if ($count < 1){
      return "<div class=\"mapError\">Map not found!</div>"; 
    }
  }

?>



<? if(isset($_GET["addMap"]) || isset($_GET["editMap"])){ ?>
<form method="post" action="/wp-admin/admin.php?page=42A-gmaps-admin.php">
  <div class="formDesc">
<?php if (isset($_GET['addMap'])) {
  $mapLat = 52.104537069436134;
  $mapLon = 4.94384765625;
  $mapZoom = 7;
?>
    <h3>Nieuwe Google Map Aanmaken:</h3>
    <p>Klik op de kaart om de locatie te bepalen.</p>
<?php } else if (isset($_GET['editMap'])) { ?>
    <h3>Map Bewerken: <? echo $mapName; ?> <sup>(map <? echo $mapId; ?>)</sup></h3>
    <p>Klik op de kaart om de locatie te bepalen, vul vervolgens de onderstaande formulieren in om de gegevens van uw locatie op de kaart correct op te slaan. De centrering en zoom van de kaart worden automatisch opgeslagen.</p>
<?php } ?>
  </div>
  <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<? echo get_option('setting42A-gmaps-apikey'); ?>"></script> 
  <div id="map" style="width: 99%; height: 400px"></div>
  <script type="text/javascript">
    function createInfoMarker(point, address) {
      var marker = new GMarker(point);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(address);
      });
      return marker;
    }

    var map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl3D());
    map.addControl(new GMapTypeControl());
    map.enableScrollWheelZoom();

    map.setCenter(new GLatLng(<? echo $mapLat; ?>, <? echo $mapLon; ?>), <? echo $mapZoom; ?>);
    //map.centerAndZoom(new GPoint(51.93903325428068, 4.222397804260254), 17);
    
<?php if (!isset($_GET['addMap'])) { ?>
    var point = new GPoint(<? echo $mapLon; ?>, <? echo $mapLat; ?>);
    address = "<strong>Opgeslagen</strong><br />Uw locatie is bekend. Klik op opslaan om de locatie op te slaan.";
    var marker = createInfoMarker(point, address);
    map.addOverlay(marker);
<? } ?>

    GEvent.addListener(map, "zoom", function(marker, point) {
        document.getElementById("mapZoom").value = map.getZoom();
    });

/*
    GEvent.addListener(map, "maptypechanged", function() {
      map.getCurrentMapType() == G_NORMAL_MAP
    });
*/
    GEvent.addListener(map, "click", function(marker, point) {
      var center = map.getCenter();
      var geoInput = point.toString();
      geoInput = geoInput.replace("(", "");
      geoInput = geoInput.replace(")", "");
      var latLongArray = geoInput.split(", ");
      var pointLat = latLongArray[0];
      var pointLong = latLongArray[1];
      var mapZoom = map.getZoom();

      document.getElementById("mapLat").value = pointLat;
      document.getElementById("mapLon").value = pointLong;
      map.recenterOrPanToLatLng(point);
      map.clearOverlays();
      map.addOverlay(new GMarker(point));
    });
  </script>
  
  <fieldset>
    <legend>Algemene Map gegevens:</legend>
    <table class="form-table">
      <tbody>
        <tr valign="top">
          <th scope="row"><label for="mapName">Naam</label></th>
          <td>
            <input type="text" id="mapName" name="mapName" class="regular-text" value="<? echo $mapName; ?>" />
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><label for="mapDesc">Omschrijving</label></th>
          <td>
            <textarea class="large-text code" id="mapDesc" cols="50" rows="3" name="mapDesc"><? echo $mapDesc; ?></textarea>
          </td>
        </tr>
      <tbody>
    </table>
  </fieldset>
  <fieldset>
    <legend>Map pointer:</legend>
    <table class="form-table">
      <tbody>
        <tr valign="top">
          <th scope="row"><label for="mapName">Selecteer map pointer</label></th>
          <td class="pointers">
            <a href="#" id="icon1blue">
              <img src="/wp-content/plugins/42A-gmaps/images/gmap_pin1_blue.png" height="46" width="26" alt="" />
            </a>
            <a href="#" id="icon1red">
              <img src="/wp-content/plugins/42A-gmaps/images/gmap_pin1_red.png" height="46" width="26" alt="" />
            </a>
            <a href="#" id="icon1orange">
              <img src="/wp-content/plugins/42A-gmaps/images/gmap_pin1_orange.png" height="46" width="26" alt="" />
            </a>
            <a href="#" id="icon1pink">
              <img src="/wp-content/plugins/42A-gmaps/images/gmap_pin1_pink.png" height="46" width="26" alt="" />
            </a>
            <a href="#" id="icon1green">
              <img src="/wp-content/plugins/42A-gmaps/images/gmap_pin1_green.png" height="46" width="26" alt="" />
            </a>
            <a href="#" id="icon1gray">
              <img src="/wp-content/plugins/42A-gmaps/images/gmap_pin1_gray.png" height="46" width="26" alt="" />
            </a>
            <script type="application/javascript">
              jQuery("td.pointers").find("a#icon<? echo $mapIconId . $mapIconColor; ?>").addClass("active");

              jQuery("td.pointers a").click(function(){
                var imgUrlFull = jQuery(this).find("img").attr("src");
                var imgUrlNumber = imgUrlFull.replace("/wp-content/plugins/42A-gmaps/images/gmap_pin","").substr(0,1);
                var imgUrlColor = imgUrlFull.replace("/wp-content/plugins/42A-gmaps/images/gmap_pin"+imgUrlNumber+"_","").replace(".png","");
                jQuery("#mapIconColor").attr("value",imgUrlColor);
                jQuery("#mapIconId").attr("value",imgUrlNumber);
                jQuery(this).parent().parent().find("a").removeClass("active");
                jQuery(this).addClass("active");
                return false;
              })
            </script>
            <input type="hidden" id="mapIconId" name="mapIconId" class="regular-text" value="<? echo $mapIconId; ?>" />
            <input type="hidden" id="mapIconColor" name="mapIconColor" class="regular-text" value="<? echo $mapIconColor; ?>" />
          </td>
        </tr>
      <tbody>
    </table>
  </fieldset>
  <fieldset>
    <legend>Map locatie gegevens:</legend>
    <table class="form-table">
      <tbody>
<!--
        <tr valign="top">
          <th scope="row"><label for="mapLat">mapLat</label></th>
          <td>
            <input type="text" id="mapLat" name="mapLat" class="regular-text" value="<? echo $mapLat; ?>" />
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><label for="mapLon">mapLon</label></th>
          <td>
            <input type="text" id="mapLon" name="mapLon" class="regular-text" value="<? echo $mapLon; ?>" />
          </td>
        </tr>
-->
        <tr valign="top">
          <th scope="row"><label for="mapAddress">Adres</label></th>
          <td>
            <input type="text" id="mapAddress" name="mapAddress" class="regular-text" value="<? echo $mapAddress; ?>" />
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><label for="mapZip">Postcode</label></th>
          <td>
            <input type="text" id="mapZip" name="mapZip" class="regular-text" value="<? echo $mapZip; ?>" />
          </td>
        </tr>
        <tr valign="top">
          <th scope="row"><label for="mapCity">Woonplaats</label></th>
          <td>
            <input type="text" id="mapCity" name="mapCity" class="regular-text" value="<? echo $mapCity; ?>" />
          </td>
        </tr>
      <tbody>
    </table>
  </fieldset>
  <fieldset>
    <legend>Map locatie gegevens:</legend>
    <table class="form-table">
      <tbody>
        <tr valign="top">
          <th scope="row"><label for="mapType">Map type</label></th>
          <td>
            <select name="mapType" id="mapType">
              <option value="G_NORMAL_MAP" <? if($mapType == ""){echo "selected=\"selected\"";} ?>>Selecteer map type</option>
              <option value="G_NORMAL_MAP" <? if($mapType == "G_NORMAL_MAP"){echo "selected=\"selected\"";} ?>>Kaart met wegen</option>
              <option value="G_SATELLITE_MAP" <? if($mapType == "G_SATELLITE_MAP"){echo "selected=\"selected\"";} ?>>Satelietbeeld</option>
              <option value="G_HYBRID_MAP" <? if($mapType == "G_HYBRID_MAP"){echo "selected=\"selected\"";} ?>>Hybride</option>
              <option value="G_PHYSICAL_MAP" <? if($mapType == "G_PHYSICAL_MAP"){echo "selected=\"selected\"";} ?>>Landschap</option>
            </select>
          </td>
        </tr>
<!--
        <tr valign="top">
          <th scope="row"><label for="mapZoom">mapZoom</label></th>
          <td>
            <input type="text" id="mapZoom" name="mapZoom" class="regular-text" value="<? echo $mapZoom; ?>" />
          </td>
        </tr>
-->
      <tbody>
    </table>
  </fieldset>
  <p class="submit">
    <input type="hidden" id="mapLat" name="mapLat" class="regular-text" value="<? echo $mapLat; ?>" />
    <input type="hidden" id="mapLon" name="mapLon" class="regular-text" value="<? echo $mapLon; ?>" />
    <input type="hidden" id="mapZoom" name="mapZoom" class="regular-text" value="<? echo $mapZoom; ?>" />
<? if (isset($_GET['editMap'])) { ?>
    <input type="hidden" value="updateMap" name="updateMap" />
    <input type="hidden" value="<? echo $mapId; ?>" name="mapId" />
    <input type="submit" value="Map opslaan" class="button-primary" name="Submit" />
<? } else { ?>
    <input type="hidden" value="addMap" name="addMap" />
    <input type="submit" value="Toevoegen" class="button-primary" name="Submit" />
<? } ?>
  </p>
</form>
<? } ?>



<!-- 
mapId
mapName
mapDesc
mapLat
mapLon
mapAddress
mapZip
mapCity
mapType
mapZoom
mapIconId
mapIconColor
-->



  <form method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
    <div class="formDesc">
      <?php echo "  <h3>" . __( 'Overzicht van Google Maps:', 'oscimp_trdom' ) . "</h3>"; ?>
      <p>Dit is het overzicht met de reeds ingevoerde en Google maps. Klik rechts boven in de de pagina op Help voor meer informatie en uitleg over deze module.</p>
    </div>
    <table cellspacing="0" class="widefat fixed">
      <thead>
        <tr class="thead">
          <th class="manage-column column-cb check-column" id="cb" scope="col"><input type="checkbox"/></th>
          <th class="column-username" id="username" scope="col" style="width: 35px;">ID</th>
          <th class="column-name" id="name" scope="col">Titel</th>
          <th class="column-name" scope="col">Plaats</th>
          <th class="column-name" scope="col">Adres</th>
          <th class="column-name" scope="col">mapLat</th>
          <th class="column-name" scope="col">mapLon</th>
        </tr>
      </thead>
      <tfoot>
        <tr class="thead">
          <th class="manage-column column-cb check-column" scope="col"><input type="checkbox"/></th>
          <th class="column-username" scope="col" style="width: 35px;">ID</th>
          <th class="column-name" scope="col">Titel</th>
          <th class="column-name" scope="col">Plaats</th>
          <th class="column-name" scope="col">Adres</th>
          <th class="column-name" scope="col">mapLat</th>
          <th class="column-name" scope="col">mapLon</th>
        </tr>
      </tfoot>
<?php
  $query = sprintf("SELECT mapId,mapName,mapAddress,mapCity,mapLat,mapLon FROM wp_42aGmaps");
  $results = mysql_query($query); 
  $count = mysql_num_rows($results);
  while ($row = mysql_fetch_array($results)) {
?>
      <tbody class="list:user user-list" id="users">
        <tr class="alternate" id="user-1">
          <th class="check-column" scope="row">
            <input type="checkbox" value="<?php echo $row['mapId']; ?>" class="administrator" id="<?php echo $row['mapId']; ?>" name="<?php echo $row['mapId']; ?>"/>
          </th>
          <td class="username column-username" style="width: 35px;"><a href="/wp-admin/admin.php?page=42A-gmaps-admin.php&editMap=<?php echo $row['mapId']; ?>"><?php echo $row['mapId']; ?></a></td>
          <td class="name column-name"><a href="/wp-admin/admin.php?page=42A-gmaps-admin.php&editMap=<?php echo $row['mapId']; ?>"><?php echo $row['mapName']; ?></a></td>
          <td class="name column-name"><?php echo $row['mapCity']; ?></td>
          <td class="name column-name"><?php echo $row['mapAddress']; ?></td>
          <td class="name column-name"><?php echo $row['mapLat']; ?></td>
          <td class="name column-name"><?php echo $row['mapLon']; ?></td>
        </tr>
      </tbody>
<?php
  } if ($count < 1){
?>
      <tbody class="list:user user-list" id="users">
        <tr class="alternate" id="user-1">
          <th class="check-column" scope="row">
          </th>
          <td class="name column-name" colspan="2">
            Er zijn nog geen maps ingevoerd.
          </td>
        </tr>
      </tbody>
<?php }; ?>
    </table>
    <p class="submit">
      <input type="hidden" value="deleteMap" name="deleteMap" />
      <input type="submit" value="Verwijderen" class="button-primary" />
    </p>
  </form>



  <form method="post" action="options.php">
<?php settings_fields( 'wp42aGmapsSettingsGroup' ); ?>
    <h3 style="margin: 25px 0px 0px 0px; padding: 0px;">Site Meta tags</h3>
    <p style="margin: 0px; padding: 0px;">Meta keywords and global description</p>
    <table class="form-table">
      <tr valign="top">
        <th scope="row"><label for="setting42A-gmaps-apikey">setting42A-gmaps-apikey</label></th>
        <td>
          <input type="text" class="regular-text" name="setting42A-gmaps-apikey" id="setting42A-gmaps-apikey" value="<?php if(get_option('setting42A-gmaps-apikey')){ echo get_option('setting42A-gmaps-apikey');} ?>"  />
          <em>Google Maps Api Key</em>
        </td>
      </tr>
      <tr valign="top">
        <th scope="row"><label for="setting42A-gmaps-apikey">Map breedte en hoogte</label></th>
        <td>
          <input type="text" class="regular-text" name="setting42A-gmaps-mapWidth" id="setting42A-gmaps-mapWidth" value="<?php if(get_option('setting42A-gmaps-mapWidth')){ echo get_option('setting42A-gmaps-mapWidth');} ?>"  />
          <em>Breedte in Pixels</em><br />
          <input type="text" class="regular-text" name="setting42A-gmaps-mapHeight" id="setting42A-gmaps-mapHeight" value="<?php if(get_option('setting42A-gmaps-mapHeight')){ echo get_option('setting42A-gmaps-mapHeight');} ?>"  />
          <em>Hoogte in Pixels</em><br />
        </td>
      </tr>
    </table>

    <p class="submit">
      <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>
  </form>


</div>